<template lang="pug">
.top-nav-scenic
  .top-nav-scenic-item(v-if="isMap" @click="showMap")
    i.iconfont(class="iconfont icon-ditu1")
    span 导览图
  .top-nav-scenic-item(@click="showVr")
    i.iconfont(class="iconfont icon-vr-outline")
    span VR
  .top-nav-scenic-item(@click="showText(false)" v-if="getShowIntroIcon")
    i.iconfont(class="iconfont icon-fasongtuwen")
    span 简介

</template>

<script>
import { mapGetters } from 'vuex'
import { isJSON } from '@/utils'
export default {
  data() {
    return {
      styleObjectDefault: {
        background: 'url(static/images/back.svg) no-repeat 100% 100%',
      },
      isMap: false,
    }
  },
  computed: {
    ...mapGetters(['panoInfo', 'miniMapData']),
    // 简介有值才显示
    getShowIntroIcon() {
      if (this.panoInfo) {
        let backVal = this.showText(true)
        console.log(backVal)
        return backVal
      }
      return false
    },
  },
  mounted() {
    setTimeout(() => {
      this.isHasMapMethods()
    }, 2500)
  },
  watch: {
    '$route.fullPath'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.isHasMapMethods()
      }
    },
  },
  methods: {
    hasMiniMap(sceneId) {
      sceneId = sceneId || this.$krp.getSceneId()
      console.log(sceneId)
      const mapData = this.miniMapData
      let data
      if (mapData && mapData.length) {
        mapData.map((g, gidx) => {
          g.mappointList.map((it, idx) => {
            if (it.scene_id == sceneId) {
              data = mapData[gidx]
            }
          })
        })
      }
      return data ? { sceneId: sceneId, miniMapObj: data } : null
    },
    isHasMapMethods() {
      if (this.miniMapData && this.miniMapData.length > 0) {
        let judge = this.hasMiniMap()
        if (judge) {
          return this.isMap = true
        }
      }
      this.isMap = false
    },
    showMap() {
      // console.log('1-------1---')
      this.$vgo.emit('minimap:toggle', 12)
    },
    showVr() {
      this.$krp.showVR()
    },
    showText(val) {
      // full_icon_src  pano_name pano_dec
      // full_thumb_url title dec
      let img = '', name = '', dec = '', obj = null
      if (this.panoInfo) {
        if (this.$route.query.scene_id) {
          let sceneId = this.$route.query.scene_id
          if (this.panoInfo && this.panoInfo.group_scene_list && this.panoInfo.group_scene_list.length > 0) {
            let groupList = this.panoInfo.group_scene_list
            groupList.map(item => {
              if (item.scenelist && item.scenelist.length > 0) {
                item.scenelist.map(sec => {
                  if (sec.scene_id == sceneId) {
                    img = sec.full_thumb_url
                    name = sec.title
                    dec = sec.dec
                  }
                })
              }
            })

          }
        } else {
          // img = this.panoInfo.full_icon_src
          // name = this.panoInfo.pano_name
          // dec = this.panoInfo.pano_dec
          if (this.panoInfo && this.panoInfo.group_scene_list && this.panoInfo.group_scene_list.length > 0) {
            let groupList = this.panoInfo.group_scene_list
            for (let i in groupList) {
              if (groupList[i].scenelist && groupList[i].scenelist.length > 0) {
                img = groupList[i].scenelist[0].full_thumb_url
                name = groupList[i].scenelist[0].title
                dec = groupList[i].scenelist[0].dec
                break
              }
            }
          }
        }
        // console.log(dec)
        if (val) {
          if (dec && dec != '[]') {
            return 1
          } else {
            return 0
          }
        }
        if (dec && isJSON(dec)) {
          this.$vgo.emit('dialog:mutil', {
            data: dec,
            img: img,
            name: name,
            isIntro: true,
          })
        } else {
          obj = [{
            contents: dec,
            sort: 1,
            text: "图文",
            type: 1,
          }]
          this.$vgo.emit('dialog:mutil', {
            data: JSON.stringify(obj),
            img: img,
            name: name,
            isIntro: true,
          })
        }
      }
    }
  }
}
</script>

<style lang="stylus">
.top-nav-scenic
  position absolute
  right 20px
  top 20px
  z-index 11
  font-size 15px
  height 24px
  cursor pointer
  text-align center
  padding 0 10px
  overflow hidden
  color #fff
  display flex
  .top-nav-scenic-item
    margin-left 10px
</style>
